<template>
    <div>
        <div class="add-btn">
            <el-button type="primary" @click="handleOpen">增加</el-button>
        </div>
        <el-dialog
            v-model="dialogFormVisible"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            title="选择图文"
            @close="handleClose"
        >
            <Search :style="{height:'120px'}"/>
            <el-table
                class="content-list"
                border
                ref="multipleTableRef"
                :data="contents.list"
                style="width: 100%"
                @select="handleSelectionChange"
                @select-all="handleSelectAll"
                @selection-change="handleChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    :selectable="handleSelectable"
                />
                <el-table-column label="图片">
                    <template #default="scope">
                        <el-image
                            style="width: 50px; height: 50px"
                            :hide-on-click-modal="true"
                            :preview-teleported="true"
                            :preview-src-list="[scope.row.images && scope.row.images.length > 0
                                    ? prefixUrl + scope.row.images[0].path
                                    : '']"
                        
                            :src="
                                scope.row.images && scope.row.images.length > 0
                                    ? prefixUrl + scope.row.images[0].path
                                    : ''
                            "
                            fit="contain"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column label="内容">
                    <template #default="scope">
                        <el-text truncated>{{ scope.row.text }}</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="类别">
                    <template #default="scope">
                        <el-text>{{ scope.row.type.name }}</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-tag
                            v-if="scope.row.status.id == 1003"
                            type="info"
                            disable-transitions
                            >已下线</el-tag
                        >
                        <el-tag v-else type="success" disable-transitions
                            >正常</el-tag
                        >
                        <el-tag
                            v-if="data.filter((item) => item.content.id == scope.row.id).length > 0"
                            type="warning"
                            disable-transitions
                            >已选</el-tag
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                v-model:current-page="contents.current"
                v-model:page-size="contents.pageSize"
                :total="contents.total"
                @current-change="handleCurrentChange"
            />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="handleAdd">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElTable, ElMessage, ElMessageBox } from "element-plus";
import { ref, defineEmits,defineProps } from "vue";
import { useContentStore } from "@/stores/content";
import { storeToRefs } from "pinia";
import { url,staticUrl } from "@/services";
import { addCarousel } from "@/services/carousel";
import Search from "@/pages/content/modules/Search.vue";

const emit = defineEmits(["show"]);
const props = defineProps(["data"]);
const multipleTableRef = ref();
const contentStore = useContentStore();
const { fetchContents } = contentStore;
const { contents } = storeToRefs(contentStore);
const prefixUrl = ref(staticUrl);
const dialogFormVisible = ref(false);
const selectedContents = ref([]);
const handleOpen = async () => {
    dialogFormVisible.value = true;
    await fetchContents({},{});
    console.log("contents:",contents.value);
};
const handleClose = () => {
    selectedContents.value = [];
};
const handleCurrentChange = async (val) => {
    await fetchContents({ current: val });
    contents.value.list.forEach((item) => {
        let matchContents = selectedContents.value.filter(
            (item2) => item2 == item.id
        );
        if (matchContents.length > 0) {
            multipleTableRef.value.toggleRowSelection(item, true);
        }
    });
};
const handleSelectable = (row) => {
    return props.data.filter((item) => item.content.id == row.id).length == 0;
};
const handleSelectAll = (selection) => {
    // 当点击全选时，将当前页所有未选择的项加入到已选择列表中
    if(selection.length > 0){
        selection.forEach(item => selectedContents.value.push(item.id));
    }else{
      // 当点击取消全选时，将当前页已选择的项清空
      console.log("contents.list",contents.value.list);
      contents.value.list.forEach(item => selectedContents.value = selectedContents.value.filter(selectItem => selectItem != item.id));
    }

    console.log("selectedContents",selectedContents.value);
}

const handleSelectionChange = async (val, row) => {
    console.log("change",row);
    let matchContents = selectedContents.value.filter(
        (item) => item == row.id
    );
    if (matchContents.length > 0) {
        selectedContents.value = selectedContents.value.filter(
            (item) => item !== matchContents[0]
        );
    } else {
        if (row.status.id == 1003) {
            try {
                await ElMessageBox.confirm(
                    "此图文已处于下线状态，是否要继续添加?",
                    "Warning",
                    {
                        confirmButtonText: "继续",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                );
            } catch (e) {
                multipleTableRef.value?.toggleRowSelection(row, false);
                return;
            }
        }
        selectedContents.value.push(row.id);
    }
};
const handleAdd = async () => {
    if (selectedContents.value.length == 0) {
        ElMessage.error("请至少选择一条图文");
        return;
    }
    console.log(selectedContents.value);
    await addCarousel(selectedContents.value);
    emit("show");
    dialogFormVisible.value = false;
    selectedContents.value = [];
};
</script>
<style>
.add-btn {
    display: flex;
    justify-content: flex-end;
}
</style>
